<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设定时间</title>
    <style>
            *{
                margin:0;
                padding:0;
                text-align:center;
            }
            #clockWp{
                width: 360px;
                margin:50px auto 0;
            }
    </style>
</head>
<body>
               <div>

                    <h1 id="h">00:00:00</h1>

                    <input type="text" placeholder="请输入时间"/>

                    <select id="">
                        <option value="请选择">请选择</option>
                        <option value="3600">小时</option>
                        <option value="60">分钟</option>
                        <option value="1">秒</option>
                    </select>

                    <button onclick="startBtn(this)">开始</button>
                </div> 

                <script>
                         function startBtn(btn){
                            var clock = document.getElementsByTagName('input')[0].value,
                                 sel = document.getElementsByTagName('select')[0].value,
                                 time = document.getElementsByTagName('h1')[0],
                                 timmer,h,m,s,total;
                                 btn.disabled=true;
                            if(clock == '' || isNaN(clock)){
                                alert('输入的值必须是一个数字');
                                return;
                            }


                            if(sel == '请选择' || sel == ''){
                                alert('请选择时间单位');
                                return;
                            }


                            total = clock*sel;


                            function showTime(){
                                if(total==0){
                                    clearInterval(timmer);
                                    alert('时间到');
                                    btn.disabled=false;
                                }

                                if(total<=10){
                                    time.style.color='red';
                                }if(total==0){
                                  time.style.color="black";
                                }
                        
                             h = Math.floor(total/3600);
                    
                             m = Math.floor((total%3600)/60);
                        
                             s = Math.floor((total%3600)%60);
                          
                            time.innerHTML=addZero(h)+':'+addZero(m)+':'+addZero(s);
                            total--;
                        }

                             timmer = setInterval(showTime,1000);

                             showTime();
                        }
                           function addZero(num) {
                              return num=num<10? '0'+num:num;
                           }


                </script>   
</body>
</html>